<template lang="html">
    <div class="train-add">
        <nav-header>
            <template slot="menuBefore">
                <li>
                    <router-link to="/teaching/train/train-list">培训列表</router-link>
                </li>
                <li class="gap">&gt;</li>      
            </template>
            <li v-text="form.train_name"></li>
        </nav-header>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px" v-loading="editLoading.status" :element-loading-text="editLoading.txt">
            <el-form-item label="封面图片">
                <!-- <el-upload
                    class="upload-demo"
                    drag
                    list-type="picture-card"
                    :action="this.BASE_URL + '/api/resource/res_upload'"
                    :headers="headers"
                    :before-upload="picUpBefore"
                    :on-success="picUpSuccess"
                    :show-file-list="false"
                >
                    <div v-show="!form.picture">
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">点击上传封面</div>
                        <div class="el-upload__text">支持jpg/png/jpeg等常见格式</div>
                    </div>
                    <div v-show="form.picture" class="cover-box"><img :src="this.BASE_URL + form.picture" /></div>
                </el-upload> -->
                <uploader-dom :options="uploadOptions" :picture="form.picture" @imgListen="getImg"></uploader-dom>
            </el-form-item>
            <el-form-item label="培训名称" prop="train_name">
                <el-input v-model="form.train_name" placeholder="20个字符以内"></el-input>
            </el-form-item>
            <el-form-item <el-form-item :label="user_level === 0 ? '培训人' : '培训教师'">
                <el-select v-model="form.create_id" placeholder="请选择教师">
                    <el-option v-for="(item, index) in teachData" :key="index" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="学段" prop="study_section_id">
                <el-select v-model="form.study_section_id" filterable placeholder="请选择学段" @visible-change="getOrg" @change="form.subject_id = ''" :loading="study_section_id_loading">
                <el-option v-for="(org,inx) in orgList" :key="org.id" :label="org.name" :value="org.id" ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="学科" prop="subject_id">
                <el-select v-model="form.subject_id" filterable placeholder="请选择学科" @visible-change="getSubjectList":loading="subject_id_loading">
                <el-option v-for="(sub,inx) in subjectList" :key="sub.id" :label="sub.name" :value="sub.id" ></el-option>
                </el-select>
            </el-form-item>
        <el-form-item label="培训时间" prop="date">
            <el-date-picker
            v-model="form.date"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
            :editable="false"
            :time-arrow-control="true"
            :picker-options="pickerOptionsStart"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="培训地区" prop="position">
            <el-select class="selBox" v-model="form.city" filterable placeholder="请选择城市" @visible-change="getCity" :loading="city_loading">
            <el-option v-for="(city,cityInx) in cityList" :label="city.name" :value="city.id" :key="city.id"></el-option>
            </el-select>
            <el-select class="selBox" v-model="form.area" filterable placeholder="请选择地区" @visible-change="getArea" :loading="area_loading">
            <el-option v-for="(area,areaInx) in areaList" :label="area.name" :value="area.id" :key="area.id"></el-option>
            </el-select>
            <el-select class="selBox" v-model="form.position" filterable placeholder="请选择街道" @visible-change="getPosition" :loading="position_loading">
            <el-option v-for="(pos,posInx) in positionList" :label="pos.name" :value="pos.id" :key="pos.id"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="培训学校" prop="school">
            <el-select v-model="form.school" filterable placeholder="请选择学校" @visible-change="getSchool" @change="setSchool" :loading="school_loading">
            <el-option v-for="(sch,schInx) in schoolList" :key="sch.id" :label="sch.name" :value="sch.id"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="教师名单" prop="teacher_list">
            <div class="teach-list">
            <div class="placeholder" v-show="!teachList.length">从上方的选择自动拉取数据</div>
            <ul>
                <li v-for="(teach, inx) in teachList"><span class="teach-name" v-text="teach.name"></span><i class="el-icon-close" @click="teachsDel(inx)"></i></li>
            </ul>
            </div>
        </el-form-item>
        <el-form-item label="关键字" class="keywordBox">
            <el-tag
                :key="tag"
                v-for="(tag,tagInx) in dynamicTags"
                closable
                :disable-transitions="false"
                @close="handleClose(tagInx)"
            >
                {{tag}}
            </el-tag>
            <el-input
                class="keyword"
                maxlength="8"
                v-if="inputVisible"
                v-model="inputValue"
                ref="saveTagInput"
                size="small"
                placeholder="请输入关键字介,不超10字"
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm"
            >
            </el-input>
            <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 关键词</el-button>
        </el-form-item>
        <el-form-item label="专辑介绍" prop="profile">
            <div class="text-area">
            <el-input type="textarea" maxlength="200" v-model="form.profile" placeholder="在此输入专辑介绍"></el-input>
            <span class="text-limit">{{form.profile.length}}/200</span> 
            </div>
        </el-form-item>
        <el-form-item label="课程目录">
            <template v-if="courseList.length > 0">
                <div class="course-index" v-for="(course,couInx) in courseList" v-loading="loading" element-loading-text="资源上传中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
                    <el-form :ref="'sectionForm' + couInx" :model="course" label-width="80px">
                        <el-form-item :label="'第' + (couInx+1) + '章：'" prop="name" :rules="[{validator: checkValue,trigger: 'blur',message: '请输入有效值'}]">
                        <el-input placeholder="输入章名" v-model="course.name" @keyup.enter.native="chapterInp" @blur="chapterInp"></el-input>
                        <i class="el-icon-arrow-down chapterFlag" @click="sectionTool($event)"></i>
                        <div class="course-index-fr hide">
                            <ul>
                            <li @click="delChapter(couInx)">删除章</li>
                            </ul>
                        </div>
                        </el-form-item>
                    </el-form>
                    <el-form :ref="'sectionForm' + couInx + secInx" v-for="(section,secInx) in course.section" :key="secInx" :model="section" label-width="80px">
                        <el-form-item :label="'第' + (secInx+1) + '节：'" prop="name" :rules="[{validator: checkValue,trigger: 'blur',message: '请输入有效值'}]">
                        <el-input placeholder="输入节名" v-model="section.name"></el-input>
                        <i class="el-icon-arrow-down sectionShow" @click="sectionTool($event)"></i>
                        <div class="course-index-fr hide">
                            <ul>
                            <li @click="secDialogShow(couInx, secInx, 'videoFlag')">关联视频</li>
                            <li @click="secDialogShow(couInx, secInx, 'testFlag')">关联试卷</li>
                            <li @click="secDialogShow(couInx, secInx, 'sourceFlag')">关联资源</li>
                            <li @click.stop="sourceUp(couInx, secInx, $event)">本地上传</li>
                            <li @click="delSection(couInx, secInx)">删除节次</li>
                            </ul>
                        </div>
                        </el-form-item>
                        <el-form-item label="" v-show="section.video.length > 0">
                        <ul class="chapter-list">
                            <li v-for="(src, srcInx) in section.video">
                            <a class="chapter-name ellips" :class="{'hasUrl' : !src.url}" :href="src.url ? BASE_URL +  src.url : 'javascript:;'" v-text="src.name" target="_blank"></a>
                            <div class="chapter-icon">
                                <i class="el-icon-back icon-up" @click="resourceUp(couInx, secInx,srcInx)"></i>
                                <i class="el-icon-back icon-down" @click="resourceDown(couInx, secInx,srcInx)"></i>
                                <i class="el-icon-delete" @click="resourceClear(couInx, secInx,srcInx)"></i>
                            </div>
                            </li>
                        </ul>
                        </el-form-item>
                    </el-form>
                    <el-button type="primary" @click="addSection(couInx)">添加节次</el-button>
                </div>
            </template>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" plain @click="addChapter">添加章节</el-button>
            <el-button type="primary" plain @click="removeChapter">移除章节</el-button>
        </el-form-item>
        <el-form-item label="允许下载" prop="is_download">
            <el-radio-group v-model="form.is_download">
            <el-radio :label="1">允许</el-radio>
            <el-radio :label="0">不允许</el-radio>
        </el-radio-group>
        </el-form-item>
        </el-form>
        <div>
        <el-button @click="back">取消</el-button>
        <el-button type="primary" @click="save">保存</el-button>
        </div>
        <!-- 选择视频begin -->
        <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" title="选择视频" :visible.sync="videoFlag">
        <div class="zh-table">
            <div class="zh-table-open clear">
            <div class="zh-open-left fl">
                <div class="open-width">
                <el-select v-model="video.type" filterable placeholder="请选择类型">
                    <el-option label="全部类型" :value="0"></el-option>
                    <el-option label="公开视频" :value="1"></el-option>
                    <el-option label="私有视频" :value="2"></el-option>
                </el-select>
                </div>
                <div class="open-width">
                <el-input placeholder="视频名称" v-model="video.params.keyword"  @keyup.enter.native="searchFunc"></el-input>
                </div>
                <el-button type="primary" @click="searchFunc">搜索</el-button>
            </div>
            </div>
            <div class="zh-table-contents">
            <el-table :data="video.list" :border="true" tooltip-effect="dark"  @selection-change="videoSeleListChange">
                <el-table-column
                type="selection"
                width="55"
                fixed>
                </el-table-column>
                <el-table-column show-overflow-tooltip property="video_name" label="视频名称"></el-table-column>
                <el-table-column show-overflow-tooltip property="category" label="视频分类"></el-table-column>
                <el-table-column show-overflow-tooltip property="create_time" label="上传时间"></el-table-column>
            </el-table>
            <div class="table-pagination" v-show="video.total > 10">
                <el-pagination
                    @size-change="videoSizeChange"
                    @current-change="videoCurrentChange"
                    :current-page="video.params.page_index"
                    :page-size="video.params.page_size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="video.total">
                </el-pagination>
            </div>
            <div class="hr"></div>
            <!-- <div class="dialog-title">是否停顿<span>(自动暂停后需要手动点击播放)</span></div>
            <el-radio-group v-model="video.pause">
                <el-radio :label="0">否</el-radio>
                <el-radio :label="video.pause_time"><el-input-number :controls="false" :min="1" :max="video.max"  v-model="video.pause_time" @change="pause"></el-input-number>几分钟暂停一次</el-radio>
            </el-radio-group>
            <div class="hr"></div> -->
            <div class="dialog-title">学分<span>(学员测试分数/总分数 > 60%)</span></div>
            <el-radio-group v-model="point">
                <el-radio :label="0">无</el-radio>
                <el-radio :label="1">1学分</el-radio>
                <el-radio :label="2">2学分</el-radio>
                <el-radio :label="3">3学分</el-radio>
                <el-radio :label="pointInp"><el-input-number :controls="false" :min="4" :max="100"  v-model="pointInp" @change="pointInpChange"></el-input-number>学分</el-radio>
            </el-radio-group>
            </div>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="videoFlag = false">取 消</el-button>
            <el-button type="primary" @click="secDialogEnter(0, 'videoFlag')">确 定</el-button>
        </div>
        </el-dialog>
        <!-- 选择视频end -->
        <!-- 选择试卷begin -->
        <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" title="选择试卷" :visible.sync="testFlag">
            <div class="zh-table">
                <div class="zh-table-open clear">
                <div class="zh-open-left fl">
                    <div class="open-width">
                    <el-select v-model="testType" filterable placeholder="请选择类型">
                        <el-option label="全部类型" :value="0"></el-option>
                        <el-option label="公开卷库" :value="1"></el-option>
                        <el-option label="私人卷库" :value="2"></el-option>
                    </el-select>
                    </div>
                    <div class="open-width">
                    <el-input placeholder="试卷名称" v-model="testParams.keyword"  @keyup.enter.native="searchFunc2"></el-input>
                    </div>
                    <el-button type="primary" @click="searchFunc2">搜索</el-button>
                </div>
                </div>
                <div class="zh-table-contents">
                <el-table :data="testList" :border="true" tooltip-effect="dark"  @selection-change="secSeleListChange">
                    <el-table-column
                    type="selection"
                    width="55"
                    fixed>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip property="name" label="试卷名称"></el-table-column>
                    <el-table-column show-overflow-tooltip property="grade" label="试卷分类"></el-table-column>
                    <el-table-column show-overflow-tooltip property="date" label="组卷时间"></el-table-column>
                </el-table>
                <div class="table-pagination" v-show="testTotal > 10">
                    <el-pagination
                        @size-change="testSizeChange"
                        @current-change="testCurrentChange"
                        :current-page="testParams.page_index"
                        :page-size="testParams.page_size"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="testTotal">
                    </el-pagination>
                </div>
                <div class="hr"></div>
                <div class="dialog-title">学分<span>(学员测试分数/总分数 > 60%)</span></div>
                <el-radio-group v-model="point">
                    <el-radio :label="0">无</el-radio>
                    <el-radio :label="1">1学分</el-radio>
                    <el-radio :label="2">2学分</el-radio>
                    <el-radio :label="3">3学分</el-radio>
                    <el-radio :label="pointInp"><el-input-number :controls="false" :min="4" :max="100" v-model="pointInp" @change="pointInpChange"></el-input-number>学分</el-radio>
                </el-radio-group>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="testFlag = false">取 消</el-button>
                <el-button type="primary" @click="secDialogEnter(1, 'testFlag')">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 选择试卷end -->
        <!-- 选择资源begin -->
        <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" title="选择资源" :visible.sync="sourceFlag">
        <div class="zh-table">
            <div class="zh-table-open clear">
            <div class="zh-open-left fl">
                <div class="open-width">
                <!-- <el-select v-model="source.params.file_type" filterable placeholder="请选择类型">
                    <el-option label="全部类型" :value="0"></el-option>
                    <el-option label="文档" :value="1"></el-option>
                    <el-option label="图片" :value="3"></el-option>
                    <el-option label="压缩文件" :value="4"></el-option>
                    <el-option label="音频文件" :value="5"></el-option>
                    <el-option label="视频文件" :value="6"></el-option>
                    <el-option label="应用程序" :value="7"></el-option>
                    <el-option label="其他" :value="8"></el-option>
                </el-select> -->
                    <el-select v-model="source.params.file_type" filterable placeholder="请选择类型">
                        <el-option label="全部类型" :value="0"></el-option>
                        <el-option label="公开资源" :value="1"></el-option>
                        <el-option label="私有资源" :value="2"></el-option>
                    </el-select>
                </div>
                <div class="open-width">
                <el-input placeholder="资源名称" v-model="source.params.name"  @keyup.enter.native="searchFunc3"></el-input>
                </div>
                <el-button type="primary" @click="searchFunc3">搜索</el-button>
            </div>
            </div>
            <div class="zh-table-contents">
            <el-table :data="source.list" :border="true" tooltip-effect="dark"  @selection-change="secSeleListChange">
                <el-table-column
                type="selection"
                width="55"
                fixed>
                </el-table-column>
                <el-table-column show-overflow-tooltip property="name" label="资源名称"></el-table-column>
                <el-table-column show-overflow-tooltip property="category" label="资源分类"></el-table-column>
                <el-table-column show-overflow-tooltip property="create_time" label="上传时间"></el-table-column>
            </el-table>
            <div class="table-pagination" v-show="source.total > 10">
                <el-pagination
                    @size-change="sourceSizeChange"
                    @current-change="sourceCurrentChange"
                    :current-page="source.params.page"
                    :page-size="source.params.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="source.total">
                </el-pagination>
            </div>
            <div class="hr"></div>
            <div class="dialog-title">学分<span>(学员测试分数/总分数 > 60%)</span></div>
            <el-radio-group v-model="point">
                <el-radio :label="0">无</el-radio>
                <el-radio :label="1">1学分</el-radio>
                <el-radio :label="2">2学分</el-radio>
                <el-radio :label="3">3学分</el-radio>
                <el-radio :label="pointInp"><el-input-number :controls="false" :min="4" :max="100" v-model="pointInp" @change="pointInpChange"></el-input-number>学分</el-radio>
            </el-radio-group>
            </div>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="sourceFlag = false">取 消</el-button>
            <el-button type="primary" @click="secDialogEnter(2, 'sourceFlag')">确 定</el-button>
        </div>
        </el-dialog>
        <!-- 选择资源end -->
        <!-- 上传资源begin -->
        <uploader style="display: none" :options="uploadOptions" :autoStart="true" ref="uploaderRes" :file-status-text="statusText"  @file-added="fileAddRes" @file-success="fileSuccessRes" @file-error="fileFailRes"  class="uploader-add-album">
            <uploader-unsupport></uploader-unsupport>
            <uploader-btn :directory="false"  :single="true">本地上传</uploader-btn>
            <uploader-list ></uploader-list>
        </uploader>
        <!-- 上传资源end -->
    </div>
</template>

<script>
    import {isString, uploaderFileFail} from '@/tools/tool';
    import uploaderDom from '@/components/common/uploader-image';

    export default {
        name: 'train-add',
        components: {
			uploaderDom
		},
    data() {
        return {
            user_level: sessionStorage.getItem('user_level') == 'undefined' ? undefined : JSON.parse(sessionStorage.getItem('user_level')), /*判断当前登录会员是否教育局 */
            editLoading:{
                    status:false,
                    txt:'获取数据...'
                },
            form: {
                picture: '',
                train_name: '',
                userid: this.$store.getters.userInfo.id,
                create_id: null,
                user_name: null,
                study_section_id: '',
                subject_id: '',
                date: '',
                start_time: '',
                end_time: '',
                city: '',
                area: '',
                position: '',
                positionSel: null,/*存放选择的地区id */
                school: '',
                teacher_list: [],
                keyword: [],
                profile: '',
                zhangciname: [],
                is_download: 1
            },
            dynamicTags: [],//关键词
            inputVisible: false,
                    inputValue: '',
            rules: {
                train_name: [
                {required: true,message: '请填写培训名称(20个字符以内)',trigger: 'blur'},
                    { required: true, validator: this.validateInput, message: '请填写培训名称(20个字符以内)', trigger: 'blur' },
                ],
                user_name: [
                {required: true,message: '请填写教师名称'}
                ],
                study_section_id: [
                {required: true,message: '请选择学段'}
                ],
                subject_id: [
                {required: true,message: '请选择学科'}
                ],
                date: [
                {required: true,message: '请选择培训开始和培训结束时间'}
                ],
                positionSel: [
                {required: true, validator: this.validatePositionSel, message: '请选择地区', trigger: 'change'}
                ],
                school: [
                {required: true,message: '请选择学校', validator: this.isValidateTeachList, trigger: 'change'}
                ],
                teacher_list: [
                {required: true, validator: this.validateTeachList, message: '教师名单不能为空'}
                ],
                keyword: [
                {required: true, message: '请填写关键词'}
                ],
                is_download: [
                {required: true,message: '请选择是否允许下载'}
                ]
            },
            orgList: [],
            subjectList: [],
            pickerOptionsStart: {
                disabledDate: (time) => {
                return time.getTime() < parseInt(Date.now() - 8.64e7);
                }
            },
            pickerOptionsEnd:{},
            headers: {
                Authorization: `Bearer ` + this.$g.access_token
            },
            cityList: [],
            areaList: [],
            positionList: [],
            schoolList: [],
            teachList: [],
            // courseList: [
            //   {
            //     chapter: '',
            //     sectionList: [{name: '',resource: []}]
            //   }
            // ],
            courseList: [
                // {
                //   name: '',
                //   section: [{name: '',video: []}]
                // }
            ],/*课程目录 */
            testFlag: false,/*关联试卷的弹窗 */
            testType: 0,
            testParams: {
                user_id: this.$store.getters.userInfo.id,
                page_index: 1,
                page_size: 10,
                keyword: '',
                status: 1,
                is_diffplat: 1,
            },
            testList: [],
            testTotal: 0,
            point: 0,
            pointInp: 4,
            sectionCur: {},
            secSelList: [],
            videoFlag: false,
            video: {
                type: 0,
                params: {
                //   user_id: this.$store.getters.userInfo.id,
                    create_id: this.$store.getters.userInfo.id,
                    page_index: 1,
                    page_size: 10,
                    keyword: '',
                    status: 1,
                    is_diffplat: 1,
                },
                list: [],
                total: 0,
                pause: 0,
                pause_time: 1,
                max: 1,
            },
            sourceFlag: false,
            source: {
                params: {
                    create_id: this.$store.getters.userInfo.id,
                    file_type: 0,
                    name: '',/*关键词 */
                    page: 1,/*当前页 */
                    size: 10, /*条数 */
                    data_type: 2,
                    is_diffplat: 1,
                    not_in_file_type: 2,
                },
                list: [],
                total: 0,
            },
            uploadOptions: {
                        target: this.BASE_URL+'/api/resource/res_upload',
                    testChunks: false,
                    headers:{Authorization : `Bearer `+this.$g.access_token},
            }, 
            statusText: {
                    success: '上传成功',  
                    error: '上传出错',  
                    uploading: '正在上传...',  
                    paused: '暂停',  
                    waiting: '等待上传'  
            },
            subAlbumData: [],
            selectFileShow:true,//是否显示选择文件按钮
            uploadRetryTimes:100,//文件最大重传次数
            previewImgURL:'',
            fileNumber:0,
            uploadNumber:0,
            loading: false,
            study_section_id_loading: false,/*学段加载状态 */
            subject_id_loading: false,/*学科加载状态 */
            city_loading: false,
            area_loading: false,
            position_loading: false,
            school_loading: false,
            school_sel: '',
            teachData: [],
        }
    },
    mounted() {},
    created() {
        this.getDetails();
        this.getTeach();
    },
    methods: {
        getImg(mess) {
            this.form.picture = mess.file_path;
        },
        getTeach() {
            const success = res => {
                this.teachData = res.data;
            }

            this.$ajax.get('api/user/get_user_by_appcode', {params: {}, func: {success: success}})
        },
        validatePositionSel(rule, value, callback) {
                if ( is_empty(this.form.city) ) {
                    return callback(new Error('请选择地区'));
                } else {
                    callback()
                }
            },
            isValidateTeachList(rule, value, callback) {
                if ( is_empty(value) ) {
                    return callback(new Error('请选择学校'));
                } else {
                    callback()
                }
            },
            validateTeachList(rule, value, callback) {
                if ( is_empty(this.teachList) ) {
                    return callback(new Error('请选择教师'));
                } else {
                    callback()
                }
            },
        validateInput(rule, value, callback){/*校验输入内容是否为空 */
                    if ( is_empty(value) ) {
                        return callback(new Error('请填写培训名称(20个字符以内)'));
                    } else {
                        callback()
                    }
            },
        back() {/*返回上一页 */
        this.$router.back();
        },
        picUpBefore(file) {/*图片上传之前做校验，限制大小以及类型 */
            const isLt2M = file.size / 1024 / 1024 < 10;
            if (file.type.indexOf('image') < 0) {
            this.$message.error('上传图片格式错误!');
            return false;
            }
            if (!isLt2M) {
            this.$message.error('上传图片大小不能超过 10MB!');
            return false;
            }
        },
        picUpSuccess(response,file,fileList) {/*图片上传成功保存路径 */
            // response.data =  response.data.data;

            this.form = Object.assign({}, this.form, {
                picture: response.data.file_path
            })
        },
        /**
         * 获取学段
         * @param {Boolean} flag 下拉框收起/展开
         */
        getOrg(flag) {
        if(!flag) {
            return
        }
        this.study_section_id_loading = true;
        let params = {
            level: 2,
            direction: 'balance',
        };
        const success = (res => {
            this.study_section_id_loading = false;
            this.orgList = res.data;
        })
        this.$ajax.get('api/org/org',{params: params, func: {success: success}})
        },
        /**
         * 获取学科
         * @param {Boolean} flag 下拉框收起/展开
         */
        getSubjectList(flag) {
        if(!flag || !this.form.study_section_id) {
            return
        }
        this.subject_id_loading = true;
        let params = {
            org_id: this.form.study_section_id,
            type: 2,
        }
        const success = (res => {
            this.subject_id_loading = false;
            this.subjectList = res.data;
        })
        this.$ajax.get('api/cate/subject',{params: params, func: {success: success}})
        },
        /**
         * 获取城市
         * @param {Boolean} flag 下拉框收起/展开
         */
        getCity(flag) {
        if(!flag) {
            return
        }
        this.city_loading = true;
        let params = {};
        const success = (res => {
            this.city_loading = false;
            this.cityList = res.data;
            if(!Object.is(flag,1)) {
            this.form.area = '';
            this.form.position = '';
            this.areaList = [];
            this.positionList = [];
            this.schoolList = [];
            this.form.school = '';
            this.teachList = [];
            this.form.teacher_list = [];
            }
        })
        this.$ajax.get('api/level/get_topposition',{params: params, func: {success: success}})
        },
        /**
         * 获取地区
         * @param {Boolean} flag 下拉框收起/展开
         */
        getArea(flag) {
        if(!flag || !this.form.city) {
            return
        }
        this.area_loading = true;
        let params = {
            id: this.form.city
        };
        const success = (res => {
            this.area_loading = false;
            this.areaList = res.data;
            if(!Object.is(flag,1)) {
            this.form.position = '';
            this.positionList = [];
            this.schoolList = [];
            this.form.school = '';
            this.teachList = [];
            this.form.teacher_list = [];
            }
        })
        this.$ajax.get('api/level/get_position_by_parent_id',{params: params, func: {success: success}})
        },
        /**
         * 获取街道
         * @param {Boolean} flag 下拉框收起/展开
         */
        getPosition(flag) {
        if(!flag || !this.form.area) {
            return
        }
        this.position_loading = true;
        let params = {
            id: this.form.area
        };
        const success = (res => {
        this.position_loading = false;
            this.positionList = res.data;
            if(!Object.is(flag,1)) {
            this.form.school = '';
            this.schoolList = [];
            this.teachList = [];
            this.form.teacher_list = [];
            }
        })
        this.$ajax.get('api/level/get_position_by_parent_id',{params: params, func: {success: success}})
        },
        /**
         * 获取学校
         * @param {Boolean} flag 下拉框收起/展开
         */
        getSchool(flag) {
        if(!flag) {
            return
        }
        if(this.form.city) {
            this.form.positionSel = this.form.city;
        }
        if(this.form.area) {
            this.form.positionSel = this.form.area;
        }
        if(this.form.position) {
            this.form.positionSel = this.form.position;
        }
        if(!this.form.positionSel) {
            return;
        }
        this.school_loading = true;
        let params = {
            id: this.form.positionSel
        };
        const success = (res => {
            this.school_loading = false;
            this.schoolList = res.data;
        })
        this.$ajax.get('api/level/get_school_by_postionid',{params: params, func: {success: success}})
        },
        setSchool(val) {
        this.schoolList.forEach(ele=>{
            // if(Object.is(val,ele.app_code)) {
            //   this.school_sel = ele.id;
            // }
            if (ele.id == this.form.school) {
                this.school_sel = ele.id;
            }
        })
        this.form.teachList = [];
        this.getTeachs();
        },
        getTeachs() {/*获取教师名单 */
            let app_code = '';
            this.schoolList.forEach( ele => {
                if (this.form.school == ele.id) {
                    app_code = ele.app_code;
                }
            })

        let params = {
            role_id: 6,
            app_code: app_code,
            is_diffplat: 1,
            is_allappcode: 1,
        }

        const success = res => {
            this.teachList = res.data;
            this.form.teacher_list = [];
            this.teachList.forEach(teach => {
            this.form.teacher_list.push(teach.id)
            })

            this.$refs['form'].validateField('teacher_list');
        }
        this.$ajax.get('api/user/user',{params: params, func: {success: success}})
        },
        teachsDel(i) {/*移除教师 */
        this.teachList.splice(i,1);
        this.form.teacher_list.splice(i,1);
        },
        handleClose(tag) {
        this.dynamicTags.splice(tag, 1);
        },
        showInput() {
            if(this.dynamicTags.length >= 5) {
                        this.$message.error('关键词最多设置5个');
                        return 
                    }
                    this.inputVisible = true;
                    this.$nextTick(_ => {
                        this.$refs.saveTagInput.$refs.input.focus();
                    });
        },
        handleInputConfirm() {
                    let inputValue = this.inputValue;
                    if (checkSpace(inputValue)) {
            this.dynamicTags.push(inputValue);
            this.form = Object.assign({}, this.form, {
                keyword: this.dynamicTags.join()
            })
                    }
                    this.inputVisible = false;
                    this.inputValue = '';
        },
        checkValue(rule, value, callback) {
            if (!checkSpace(value)) {
            callback(new Error("请输入有效值"));
                    }else {
            callback();
            }
        },
        addChapter() {/*添加章 */
        this.courseList.push({
            name: '',
            section: [{name: '',video: []}]
        })
        },
        chapterInp(val) {
            
        },
        delChapter(i) {/*删除章 */
        this.courseList.splice(i, 1);
        },
        removeChapter() {/*移除章 */
        this.courseList.pop();
        },
        addSection(i) {/*添加节 */
        this.courseList[i].section.push({name: '',video: []});
        },
        delSection(couInx, secI){/*删除节 */
        this.courseList[couInx].section.splice(secI, 1);
        this.removeRotate();
        },
        removeRotate() {/*按钮旋转 */
        const cls = document.querySelectorAll('.el-icon-arrow-down');
        for(let i=0;i<cls.length;i++) {
            cls[i].classList.remove('rotate');
        }
        },
        sectionToolHide() {
        const cls = document.querySelectorAll('.course-index-fr');
        for(let i=0;i<cls.length;i++) {
            cls[i].className = 'course-index-fr hide';
        }
        },
        sectionTool(e,secInx) {/*控制章节的按钮显示/隐藏 */
        if(e.target.parentNode.children[2].className.indexOf('hide') > -1) {
            this.sectionToolHide();
            this.removeRotate();
            e.target.classList.add('rotate');
            e.target.parentNode.children[2].classList.remove('hide');
        } else {
            e.target.classList.remove('rotate');
            e.target.parentNode.children[2].classList.add('hide');
        }
        },
        /**
         * 搜索列表
         */
        searchFunc2() {
            this.testParams.page_index = 1;
            this.getTestList();
        },
        getTestList() {/*获取试卷列表 */
        //   let params = this.testType < 2 ? Object.assign({},this.testParams, {authority: this.testType}) : this.testParams;
        let params = null;
            if (this.testType == 0) {
                params = Object.assign({}, this.testParams, {authority: '', user_id : ''});
            } else if (this.testType == 1) {
                params = Object.assign({}, this.testParams, {authority: '1', user_id : ''});
            } else if (this.testType == 2) {
                params = Object.assign({}, this.testParams, {authority: '', user_id : this.$store.getters.userInfo.id});
            }
        const success = res => {
            this.testTotal = res.data.data_sum;
            this.testList = res.data.data;
            this.testList.forEach(ele => {
            ele.grade = ele.grade ? ele.study_section + '>' + ele.grade + '>' + ele.subject : '适用所有';
            })
        }
        this.$ajax.get('api/test/test',{params: params, func: {success: success}})
        },
        testSizeChange(size) {/*试卷列表分页控制 */
        this.testParams.page_size = size;
        this.getTestList();
        },
        testCurrentChange(val) {/*试卷列表分页控制 */
        this.testParams.page_index = val;
        this.getTestList();
        },
        /**
         * 搜索列表
         */
        searchFunc() {
            this.video.params.page_index = 1;
            this.getVideoList();
        },
        getVideoList() {/*获取视频列表 */
        //   let params = this.video.type < 2 ? Object.assign({},this.video.params, {authority: this.video.type}) : this.video.params;
            let params = null;
            if (this.video.type == 0) {
                params = Object.assign({}, this.video.params, {authority: '', create_id : ''});
            } else if (this.video.type == 1) {
                params = Object.assign({}, this.video.params, {authority: '1', create_id : ''});
            } else if (this.video.type == 2) {
                params = Object.assign({}, this.video.params, {authority: '', create_id : this.$store.getters.userInfo.id});
            }
        const success = res => {
            this.video.total = res.data.data_sum;
            this.video.list = res.data.data;
            this.video.list.forEach(ele => {
            ele.grade = ele.grade ? ele.study_section + '>' + ele.grade + '>' + ele.subject : '适用所有';
            })
        }
        this.$ajax.get('api/video/video_list',{params: params, func: {success: success}})
        },
        videoSizeChange(size) {/*视频列表分页控制 */
        this.video.params.page_size = size;
        this.getVideoList();
        },
        videoCurrentChange(val) {/*视频列表分页控制 */
        this.video.params.page_index = val;
        this.getVideoList();
        },
        pause() {/*视频暂停时间 */
        this.video.pause = this.video.pause_time;
        },
        /**
         * 搜索列表
         */
        searchFunc3() {
            this.source.params.page = 1;
            this.getSourceList();
        },
        getSourceList() {/*获取资源列表 */
            let params = this.source.params;
            if (this.source.params.file_type == 0) {
                params = Object.assign({}, this.source.params, {authority: '', create_id : ''});
            } else if (this.source.params.file_type == 1) {
                params = Object.assign({}, this.source.params, {authority: '1', create_id : ''});
            } else if (this.source.params.file_type == 2) {
                params = Object.assign({}, this.source.params, {authority: '', create_id : this.$store.getters.userInfo.id});
            }
        const success = res => {
            this.source.total = res.data.data_sum;
            this.source.list = res.data.data;
        }
        this.$ajax.get('api/resource/resource',{params: params, func: {success: success}})
        },
        sourceSizeChange(size) {/*视频列表分页控制 */
        this.source.params.size = size;
        this.getSourceList();
        },
        sourceCurrentChange(val) {/*视频列表分页控制 */
        this.source.params.page = val;
        this.getSourceList();
        },
        secDialogShow(couInx, secInx, flag) {/*控制弹窗显示*/
        this.sectionCur[`couInx`] = couInx;
        this.sectionCur[`secInx`] = secInx;
        this.secSelList = [];
        this.point = 0;
        this.pointInp = 4;
        this.removeRotate();
        this.sectionToolHide();
        this[`${flag}`] = true;
        if(Object.is(flag, 'testFlag')) {
            this.getTestList();
        }
        if(Object.is(flag, 'videoFlag')) {
            this.video.pause = 0;
            this.video.pause_time = 1;
            this.getVideoList();
        }
        if(Object.is(flag, 'sourceFlag')) {
            this.getSourceList();
        }
        },
        pointInpChange() {
        this.point = this.pointInp;
        },
        videoSeleListChange(list) {/*视频选择列表，视频需要处理停顿时间值 */
        this.secSelList = list;
        let video_time_list = [];
        this.secSelList.forEach(ele => {
            if(ele.length) {
                let len = ele.length.split(':');
                let h = parseInt(len[0]);
                let m = parseInt(len[1]);
                let mCount = parseInt((h * 60) + m + 1);
                video_time_list.push(mCount);
            }
        })
        this.video.max = video_time_list.length > 0 ? Math.max.apply(null, video_time_list) : 1;
        },
        secSeleListChange(list) {/*表格选择列表 */
        this.secSelList = list;
        },
        secDialogEnter(type, flag) {/*表格设置学分 */
        let couInx = this.sectionCur[`couInx`];
        let secInx = this.sectionCur[`secInx`];
        let hash = {};
        let arr = [];
        if(this.secSelList.length > 0) {
            if(Object.is(type, 0)) {/*视频的处理 */
            this.secSelList.forEach(ele => {
                this.courseList[couInx].section[secInx].video.push({res_id: ele.id,origin: type,study_score: this.point, stop_time: this.video.pause,name: ele.video_name,url: ele.video_url});
            })
            }
            if(Object.is(type, 1)) {/*试卷的处理 */
            this.secSelList.forEach(ele => {
                this.courseList[couInx].section[secInx].video.push({res_id: ele.id,origin: type,study_score: this.point,name: ele.name,url: ele.test_url});
            })
            }
            if(Object.is(type, 2)) {/*资源的处理 */
            this.secSelList.forEach(ele => {
                this.courseList[couInx].section[secInx].video.push({res_id: ele.id,origin: type,study_score: this.point,name: ele.name,url: ele.path});
            })
            }
            this.courseList[couInx].section[secInx].video.forEach( (res, resInx) => {/*值覆盖 */
            this.secSelList.forEach(ele => {
                if(Object.is(res.type, 'text')) {
                if(!Object.is(res.res_id, ele.id)) {
                    this.courseList[couInx].section[secInx].video[resInx].study_score = this.point;
                }
                }
            })
            })
        }
        arr = this.courseList[couInx].section[secInx].video.reduceRight((item, next) => {/*去重 */
            hash[next.res_id] ? '' : hash[next.res_id] = true && item.push(next);
            return item
        }, []);
        this.courseList[couInx].section[secInx].video = arr.reverse();
        console.log( this.courseList[couInx].section[secInx].video)
        this[`${flag}`] = false;
        },
        sourceUp(couInx, secInx, e) {
        this.sectionCur[`couInx`] = couInx;
        this.sectionCur[`secInx`] = secInx;
        this.sectionToolHide();
        document.querySelector('.uploader-btn').click();
        },
        fileAddRes( file ){/*本地文件上传 */
        this.courseList.forEach(ele => {
            ele.section.forEach(sec => {
            sec.show = false;
            })
        })
        this.removeRotate();
        this.removeRotate();
        this.loading = true;
        },
        //上传成功的事件  
        fileSuccessRes (rootFile, file, message, chunk) {
            this.$refs.uploaderRes.uploader.cancel();
            this.loading = false;
            const couInx = this.sectionCur[`couInx`];
            const secInx = this.sectionCur[`secInx`];
            let mess = eval('(' + message + ')');
            mess = handleResponseData( mess );
            
            this.courseList[couInx].section[secInx].video.push({origin: 3,file_type: mess.data.file_type,score: 0,name: mess.data.file_name,url: '',file_path: mess.data.file_path})
        },
        fileFailRes(rootFile, file, message, chunk) {
            uploaderFileFail(this, this.$refs.uploaderRes.uploader, file, message);
        },
        resourceUp(couInx,secInx,srcInx) {
        if(Object.is(srcInx, 0)) {
            this.$message.error('已经排在首位了');
            return;
        }
        const obj = this.courseList[couInx].section[secInx].video[srcInx];
        this.courseList[couInx].section[secInx].video.splice(srcInx,1);
        this.courseList[couInx].section[secInx].video.splice(srcInx - 1,0, obj);
        },
        resourceDown(couInx,secInx,srcInx) {
        const length = this.courseList[couInx].section[secInx].video.length - 1;
        if(Object.is(srcInx, length)) {
            this.$message.error('已经排在末位了');
            return;
        }
        const obj = this.courseList[couInx].section[secInx].video[srcInx];
        this.courseList[couInx].section[secInx].video.splice(srcInx,1);
        this.courseList[couInx].section[secInx].video.splice(srcInx + 1,0,obj);
        },
        resourceClear(couInx,secInx,srcInx) {
        this.courseList[couInx].section[secInx].video.splice(srcInx,1);
        },
        getDetails() {/*获取详情内容 */
            this.editLoading.status = true;
            let params = {
                train_id: this.$route.query.trainid
            }
            const success = res => {
                this.editLoading.status = false;
                this.form = Object.assign({},this.form,{
                    picture: res.data.picture,
                    create_id: res.data.create_id,
                    train_name: res.data.name,
                    user_name: res.data.username,
                    study_section_id: res.data.study_section_id,
                    subject_id: res.data.subject_id,
                    date: [res.data.start_time,res.data.end_time],
                    city: res.data.city_id ? res.data.city_id : '',
                    area: res.data.zone_id ? res.data.zone_id : '',
                    position: res.data.street_id ? res.data.street_id : '',
                    // school: res.data.school_app_code,
                    school: res.data.school,
                    teacher_list: res.data.teacher_id ? res.data.teacher_id.split(',') : [],
                    keyword: res.data.keyword,
                    profile: res.data.profile,
                    is_download: res.data.is_download,
                });

                this.school_sel = res.data.school;
                this.dynamicTags = res.data.keyword ? res.data.keyword.split(',') : [];
                if(res.data.teacher_list.length > 0) {
                for(let i = 0,len=res.data.teacher_list.length;i < len; i++) {
                    this.teachList.push({
                    name: res.data.teacher_list[i],
                    id: res.data.teacher_id[i],
                    })
                }
                }
                this.getOrg(1);
                this.getSubjectList(1);
                this.getCity(1);
                if(this.form.area) {
                    this.getArea(1);
                }
                if(this.form.position) {
                    this.getPosition(1);
                }
                this.getSchool(1);
                this.gettrains_l();
                
            }
            this.$ajax.get('api/train/train',{params: params, func: {success: success}})
        },
        gettrains_l() {
        let params = {
            train_id: this.$route.query.trainid,
            userid: this.$store.getters.userInfo.id,
        }
        const success = res => {
            if(res.data.length > 0) {
            this.courseList = res.data;
            }
        }
        this.$ajax.get('api/train/gettrains_l',{params: params, func: {success: success}})

        },
        save() { 
            for (let i=0; i<this.courseList.length; i++) {
                if (this.courseList[i].name === '') {
                    this.$message.error(`第${i+1}章内容不能为空，请填写内容。`);
                    return
                }

                for(let j=0; j<this.courseList[i].section.length; j++) {
                    if (this.courseList[i].section[j].name === '') {
                        this.$message.error(`第${i+1} - ${j+1}节内容不能为空，请填写内容`);
                        return;
                    }
                }
            }
            
        let formValidate = false;
        this.$refs[`form`].validate(valid => {
            if (valid) {
            formValidate = valid;
            }
        })
        if(!formValidate) {return};

        this.form = Object.assign({},this.form,{
            trainid: this.$route.query.trainid,
            start_time: this.form.date[0],
            end_time: this.form.date[1],
            keyword: this.dynamicTags.length > 0 ? this.dynamicTags.join() : '',
            // position: this.form.positionSel,
            school: this.school_sel,
        })

        let chapterList = [];
        let sectionList = [];
        let sourceList = [];
        let sourecArr = [];
        this.courseList.forEach((ele,eleInx) => {
            chapterList.push(ele.name);
            sectionList.push([]);
            sourceList.push([])
            ele.section.forEach((sec,secInx) => {
            sectionList[eleInx].push(sec.name);
            sourceList[eleInx].push([])
            sec.video.forEach((src) => {
                sourecArr.push(src.name)
                switch(src.origin){
                case 0:
                    sourceList[eleInx][secInx].push(`${src.res_id},${src.origin},${src.stop_time},${src.study_score}`);
                    break;
                case 1:
                    sourceList[eleInx][secInx].push(`${src.res_id},${src.origin},${src.study_score}`);
                    break;
                case 2:
                    sourceList[eleInx][secInx].push(`${src.res_id},${src.origin}`);
                    break;
                case 3:
                    if(Object.is(src.file_type,0)) {
                    sourceList[eleInx][secInx].push(`${src.file_path},${src.file_type},0,${src.name}`);
                    } else if(Object.is(src.file_type,2)) {
                    sourceList[eleInx][secInx].push(`${src.file_path},${src.file_type},${src.name}`);
                    }
                    break;
                }
            })
            })
        })
        if(sourecArr.length > 0) {
            const refs = Object.keys(this.$refs);
            let refValid = [];
            refs.forEach(ele => {
            if(ele.indexOf('sectionForm') > -1) {
                this.$refs[`${ele}`][0].validate(valid => {
                refValid.push(valid)
                })
            }
            })
            if(refValid.indexOf(false) > -1) {
            return
            }
        }
        this.form = Object.assign({},this.form,{
            zhangciname: chapterList,
            jieciname: sectionList,
            videoid: sourceList,
        })
        let params = this.form;
        params = Object.assign({}, params, {
            position: this.form.positionSel,
        })
        const success = (res) => {
            this.$message.success(res.msg);
            this.$router.go('-1');
        }
            this.$ajax.put('api/train/train',params,{func:{success:success}})
        }
    },
    }
</script>

<style lang="scss">
    .train-add {
    margin-bottom: 35px;
    .el-form {
        width: 480px;
        .selBox {
        width: 32%;
        }
        .text-area {
        position: relative;
        display: inline-block;
        .text-limit {
            position: absolute;
            bottom: 5px;
            right: 15px;
        }
        }
        .keywordBox{
        .el-tag{
            margin-right: 10px;
            border: 0;
            background-color: rgb(239, 246, 255);
            border-radius: 0;
        }
        }
        .keyword{
        max-width: 220px !important;
        }
        .el-upload {
        width: 100%;
        height: auto;
        line-height: 1.5;
        .el-upload-dragger {
            width: 100%;
            .cover-box {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            background: rgba(0,0,0,.5);
            z-index: 1;
            img {
                display: inline-block;
                width: 100%;
                height: 100%;
            }
            }
        }
        }
        .el-form-item__label {
        text-align: left;
        }
        .el-cascader {
        display: block;
        }
        .el-input {
        display: block;
        width: 100%;
        }
        .el-date-editor--daterange.el-input__inner {
        width: 100%;
        }
        .el-textarea__inner {
        resize: none;
        width: 625px;
        height: 120px;
        }
        .teach-list {
        width: 625px;
        height: 100px;
        padding: 5px 15px;
        border: 1px solid #dcdfe6; 
        border-radius: 4px;
        cursor: text;
        box-sizing: border-box;
        overflow: hidden;
        overflow-y: auto;
        .placeholder {
            color: #c0c4cf;
            font-size: 13px;
        }
        li {
            display: inline-block;
            height: 32px;
            line-height: 32px;
            background: #ddd;
            margin-right: 15px;
            margin-bottom: 10px;
            .teach-name {
            padding: 0 10px;
            }
            i {
            display: inline-block;
            height: 100%;
            vertical-align: top;
            padding: 0 5px;
            line-height: 32px;
            background: #c0c4cf;
            cursor: pointer;
            }
        }
        }
        .course-index {
        position: relative;
        width: 625px;
        padding: 32px 18px;
        margin-top: 15px;
        background: #f2f2f2;
        border-radius: 5px;
        box-sizing: border-box;
        &:nth-of-type(1) {
            margin-top: 0;
        }
        .el-form {
            width: 100%;
            .el-form-item__content {
            width: 86%;
            .el-input {
                width: 300px;
            }
            }
            .el-icon-arrow-down {
            position: absolute;
            right: 0;
            top: 15px;
            font-size: 20px;
            transform: translateY(-50%);
            cursor: pointer;
            }
            .video-more {
            top: 0;
            transform: translateY(0);
            }
            .rotate {
            transform: rotate(180deg) translateY(40%);
            right: 0;
            }
        }
        .chapter-list {
            margin-bottom: 20px;
        li {
            display: flex;
            height: 44px;
            line-height: 44px;
            border-top: 1px solid #e8e8e8;
            .chapter-name {
                flex: 1;
                margin-right: 25px;
                color: #409eff;
                cursor: pointer;
            }
            .hasUrl {
                color: #000;
                cursor: auto;
            }
            .chapter-icon {
                text-align: right;
                .icon-up {
                transform: rotate(90deg);
                }
                .icon-down {
                transform: rotate(-90deg);
                }
                i {
                cursor: pointer;
                margin-right: 10px;
                }
            }
            }
            li:last-child {
            border-bottom: 1px solid #e8e8e8;
            }
        }
        .course-index-fr {
            position: absolute;
            width: 100%;
            text-align: right;
            z-index: 10;
            ul {
            display: inline-block;
            width: 120px;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            text-align: center;
            background: #fff;
            li {
                cursor: pointer;
                .uploader {
                .uploader-btn {
                    border: none;
                    color: #000;
                    background: none;
                }
                .uploader-list {
                    display: none;
                }
                }
                &:hover {
                background: #f2f2f2;
                }
            }
            }
            .del-chapter {
            margin-bottom: 20px;
            }
        }
        }
    }
    .el-dialog {
        min-width: 610px;
        .table-pagination {
        margin-top: 0;
        padding: 5px 0;
        text-align: left;
        border: 1px solid #ddd;
        border-top: 0;
        }
        .hr {
        width: 100%;
        border-bottom: 1px dotted #dcdfe6;
        margin: 15px 0;
        }
        .dialog-title {
        border-left: 2px solid #606266;
        padding-left: 5px;
        color: #000;
        margin: 10px 0;
        span {
            color: #999;
            margin-left: 5px;
        }
        }
        .el-radio+.el-radio {
        margin-left: 20px;
        }
        .el-input-number--small {
        width: 60px;
        margin-right: 5px;
        }
    }
    .show {
        display: block;
    }
    .hide {
        display: none;
    }
    }
</style>
